<template>
 <div class="app-container">
    被打分人信息
    <!--查询表单-->
    <el-card class="operate-container" shadow="never">
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="name":disabled="true" placeholder="姓名" /> 
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="email":disabled="true" placeholder="邮箱" /> 
      </el-form-item>
    </el-form>
    </el-card>

     <!-- 表格 -->
    <el-table
      :data="list"
      border
      stripe
      @selection-change="handleSelectionChange">
      <el-table-column prop="subjectinfo" label="题目" width="500" />
      <el-table-column label="A选项" prop="subjecta" width="150"></el-table-column>
      <el-table-column prop="subjectb" label="B选项" width="150" />
      <el-table-column prop="subjectc" label="C选项" width="150" />
      <el-table-column prop="subjectd" label="D选项" width="150" />
    </el-table>

    <el-pagination @size-change="sizeChange" @current-change="currentChange"
      :current-page="page" :page-size="size" :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-input
        type="textarea"
        :rows="2"
        placeholder="请用，分割且使用A,B,C,D样式"
        v-model="textarea" style="width:80%">
    </el-input>
   <el-button type="primary" plain @click="submit1()">评分提交</el-button>
    <!-- <el-button type="primary" round style="width:15%" @click="submit()>提交</el-button> -->
 </div>

</template>

<script>
import indexApi from '@/api/examination/index.js'
import indexApi1 from '@/api/question/index.js'
  export default {
    data() {
      return {
        page: 1, //第几页
        size: 5, //一页多少条
        total: 0, //总条目数
        pageSizes: [5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
        email:'',
        name:'',
        list:[],
        textarea:''
      };
    },
     created() { // 在渲染之前执行
        this.fetchinfo(this.$route.params.email);

    },
    mounted() { // 在渲染之后执行   

        
       
    },
    methods: {
      fetchinfo(email){
        console.log(email)
        indexApi.getcandidate(email).then(response => {
          this.email=response.data.email
          this.name=response.data.name
        })
        indexApi1.getsubject(email).then(response => {
          this.list=response.data
        })
      },

      submit1(){
          this.$confirm('你确定给这个用户这样打分吗, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '打分成功!'
              });
              if(this.textarea===''){
                this.textarea='D,D'
              }
              console.log(this.textarea)
              indexApi.saveresult(this.textarea,this.email).then(response => {
                this.$router.push(`/examination1`)
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消打分'
              });          
            });

          
      },

      

    

       handleSelectionChange(selection){
      this.multipleSelection=selection
    },



      

        
      },
        //获取表格数据，自行分页(slice)
    getTabelData() {
        //allData为全部数据
      this.list = this.list1.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total=this.list1.length
    },


    //获取表格数据，自行分页（splice）
    getTabelData2() {
      let data=JSON.parse(JSON.stringify(this.list1))
      this.list = data.splice(
        (this.page - 1) * this.size,
        this.size
      );
      this.total=this.list1.length
    },
    //page改变时的回调函数，参数为当前页码
     currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1; 
      this.getTabelData2();
    },

    
  };
</script>